import { List, Modal, Space, Tag } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { shallowEqual } from "react-redux";
import { create } from "@/store/settingCountry/settingCountryAPI";
import { getCountryAsync } from "@/store/settingCountry/settingCountrySlice";

export interface DataType {
  block_country: string[];
  channel: number;
}

export default function MTable() {
  const { table, params } = useAppSelector(
    (state) => state.settingCountry,
    shallowEqual
  );
  const {
    config: { data: { data: { user_channel_list = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);
  const dispatch = useAppDispatch()

  return (
    <List
      bordered
      className="bg-white"
      dataSource={table?.data?.data?.block_country_config}
      loading={table.status === 'loading'}
      renderItem={(item) => {
        return (
          <List.Item>
            <Space className="w-full">
              {user_channel_list.find((i) => i.value === item.channel)?.label}：
              {Array.isArray(item.block_country) &&
                item.block_country.map((country) => {
                  return country &&  (
                    <Tag key={country} className="m-0" color="#f50" closeIcon onClose={(e) => {
                      e.preventDefault()
                      Modal.confirm({
                        title: '确认删除吗？',
                        onOk: () => new Promise<void>((resolve, reject) => {
                          create({
                            opt_type: 2,
                            channel: item.channel,
                            country
                          }).then(() => {
                            resolve()
                            dispatch(getCountryAsync({...params}))
                          }).catch(reject)
                        })
                      })
                    }}>
                      {country}
                    </Tag>
                  );
                })}
            </Space>
          </List.Item>
        );
      }}
    />
  );
}
